<template>
    <div class="clearFix feedback unified-bg">
      <div class="main">
        <div class="content">
          <p class="title">反馈内容</p>
          <div class="input-warp">
            <textarea class="weui-textarea feed-cont" v-model="content" placeholder="请输入文本" rows="3"></textarea>
            <div class="weui-textarea-counter"><span> {{strLength}} </span> / 200</div>
          </div>
          <div class="button-wrap">
            <a href="javascript:;" @click="sublime" class="weui-btn">确认提交</a>
          </div>
          <p class="remark"> 注意:请填写详细的建议或故障信息，以便于我们能在最短的时间去处理您的问题！</p>
        </div>
      </div>
    </div>
</template>
<script>
  import * as api from 'api'
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        content: '',
        agencyId: '',
        deviceId: '',
        deviceTypeName: ''
      }
    },

    created () {
      this.deviceTypeName = this.$route.query.deviceTypeName;
      this.deviceId = this.$route.query.deviceId;
      this.agencyId = this.$route.query.agencyId;
    },

    computed: {
      strLength () {
        return this.content.length;
      },
      ...mapState({
        userId: state => state.userInfo.id
      })
    },

    methods: {
      sublime () {
        if (this.strLength > 200) {
          this.Toast('长度超过限制');
          return false;
        }
        api.feedback({
          userId: this.userId,
          feedbackContent: this.content,
          agencyId: this.agencyId,
          deviceId: this.deviceId,
          deviceTypeName: this.deviceTypeName,
          flags: 1,
          remark: this.deviceId + ':' + 1
        })
          .then((res) => {
            this.Toast(res.resultDetail);
            this.$router.go(-1);
          })
      }
    },

    mounted () {
      this.title('反馈')
    }
  }
</script>
<style lang="scss" scoped="">
  @import '../../../styles/user/feedback/index';
</style>
